<!--
 * @Description: 
 * @Version: 1.668
 * @Autor: 地虎降天龙
 * @Date: 2023-10-27 16:43:05
 * @LastEditors: 地虎降天龙
 * @LastEditTime: 2025-09-26 11:22:42
-->
<script setup lang="ts">
import { watch, watchEffect, ref,toRaw } from 'vue'
import { useLoop } from '@tresjs/core'
import { useTexture } from '@tresjs/cientos'
import { useTres } from '@tresjs/core'
import { Clouds, Cloud } from '@pmndrs/vanilla'
import * as THREE from 'three'

const props = withDefaults(
    defineProps<{
        color?: string
        segments?: number
        volume?: number
        opacity?: number
        seed?: number
        fade?: number
        growth?: number
        speed?: number
        bounds?: {
            x: number
            y: number
            z: number
        }
    }>(),
    {
        color: '#ffffff',
        segments: 20,
        volume: 6,
        opacity: 1.0,
        seed: 0,
        fade: 10,
        growth: 4,
        speed: 0,
        bounds: {
            x: 5,
            y: 1,
            z: 1,
        },
    },
)

const { state: map } = useTexture('./plugins/digitalCity/image/cloud.png')

const clouds = ref<any>(null)
const cloud0 = new Cloud({ color: new THREE.Color(props.color) })
const cloud1 = new Cloud({ color: new THREE.Color('pink') })
cloud1.position.set(20, 0, 10)

const { camera } = useTres()
const { onBeforeRender } = useLoop()
onBeforeRender(({ delta, elapsed }: { delta: number; elapsed: number }) => {
    clouds.value?.update(camera.value, elapsed, delta)
})
watch(
    () => map.value,
    (mapv) => {
        clouds.value = new Clouds({ texture: mapv })
        clouds.value.add(cloud0)
        clouds.value.add(cloud1)
    },
)
watch(
    () => props.color,
    (value) => {
        cloud0.color.set(value)
    },
)
watchEffect(() => {
    if (props.segments) {
        cloud0.segments = props.segments
    }
    if (props.volume) {
        cloud0.volume = props.volume
    }
    if (props.opacity) {
        cloud0.opacity = props.opacity
    }
    if (props.seed) {
        cloud0.seed = props.seed
    }
    if (props.fade) {
        cloud0.fade = props.fade
    }
    if (props.growth) {
        cloud0.growth = props.growth
    }
    if (props.speed) {
        cloud0.speed = props.speed
    }
    if (props.bounds) {
        cloud0.bounds.x = props.bounds.x
        cloud0.bounds.y = props.bounds.y
        cloud0.bounds.z = props.bounds.z
    }
    cloud0.updateCloud()
})
</script>

<template>
    <primitive v-if="clouds" :object="toRaw(clouds)" :renderOrder="3000" />
</template>
